import React from "react";
import { Models } from "node-appwrite";
import Thumbnail from "./Thumbnail";
import FormattedDateTime from "./FormattedDateTime";
import { convertFileSize, formatDateTime } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import { getUserInfo } from "@/lib/actions/user.actions";
import { getInfo } from "@/lib/apis/user";
const ImageThumbnail = ({ file }: { file: Models.Document }) => {
  return (
    <div className="file-details-thumbnail">
      <Thumbnail type={file.type} extension={file.extension} url={file.url} />
      <div className="flex flex-col">
        <p className="subtitile-2 mb-1">{file.name}</p>
        <FormattedDateTime date={file.createdAt} className="caption" />
      </div>
    </div>
  );
};
const DetailRow = ({ label, value }: { label: string; value: string }) => (
  <div className="flex">
    <p className="file-details-label text-left">{label}</p>
    <p className="file-details-value text-left">{value}</p>
  </div>
);
export const FileDetails = ({ file }: { file: Models.Document }) => {
  return (
    <>
      <ImageThumbnail file={file} />
      <div className="space-y-4 px-2 pt-2">
        <DetailRow label="Format:" value={file.extension} />
        <DetailRow label="Size:" value={convertFileSize(file.size)} />
        <DetailRow label="Owner:" value={file.owner.fullName} />
        <DetailRow label="Last edit:" value={formatDateTime(file.updatedAt)} />
      </div>
    </>
  );
};
export const ShareInput = ({
  file,
  onInputChange,
  onRemove,
  currentUserEmail,
}: {
  file: Models.Document;
  onInputChange: React.Dispatch<React.SetStateAction<string[]>>;
  onRemove: (email: string, file: Models.Document) => void;
  currentUserEmail: string;
}) => {
  return (
    <>
      <ImageThumbnail file={file} />
      <div className="share-wrapper">
        {currentUserEmail !== "" && file.owner.email === currentUserEmail && (
          <>
            <p className="subtitle-2 pl-1 text-light-100">
              Share file with users
            </p>
            <Input
              type="email"
              placeholder="Enter email address"
              onChange={(e) => onInputChange(e.target.value.trim().split(","))}
              className="share-input-field"
            ></Input>
          </>
        )}
        <div className="pt-4">
          <div className="flex justify-between">
            <p className="subtitle-2 text-light-100">Shared with</p>
            <p className="subtitle-2 text-light-200">
              {file.users.length} users
              {/* {file.owner.email} */}
            </p>
          </div>
          <ul className="pt-2">
            {file.users.map((email: string) => (
              <li
                key={email}
                className="flex items-center justify-between gap-2"
              >
                <p className="subtitle-2">{email}</p>
                {email !== currentUserEmail && currentUserEmail !== "" && (
                  <Button
                    onClick={() => onRemove(email, file)}
                    className="share-remove-user"
                  >
                    <Image
                      src="/assets/icons/remove.svg"
                      alt="remove"
                      width={24}
                      height={24}
                      className="remove-icon"
                    />
                  </Button>
                )}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </>
  );
};
